<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: "class",
      };
    </script>
    <title>Document</title>
  </head>
  <body>
    <header class="p-4 dark:bg-gray-800 dark:text-gray-100">
      <div class="container flex justify-between h-16 mx-auto">
        <a
          rel="noopener noreferrer"
          href="#"
          aria-label="Back to homepage"
          class="flex items-center p-2"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 32 32"
            class="w-8 h-8 dark:text-violet-400"
          >
            <path
              d="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"
            ></path>
            <path
              d="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"
            ></path>
          </svg>
        </a>
        <ul class="items-stretch hidden space-x-3 lg:flex">
          <li class="flex">
            <a
              rel="noopener noreferrer"
              href="#"
              class="flex items-center px-4 -mb-1 border-b-2 dark:border-transparent dark:text-violet-400 dark:border-violet-400"
              >Link</a
            >
          </li>
          <li class="flex">
            <a
              rel="noopener noreferrer"
              href="#"
              class="flex items-center px-4 -mb-1 border-b-2 dark:border-transparent"
              >Link</a
            >
          </li>
          <li class="flex">
            <a
              rel="noopener noreferrer"
              href="#"
              class="flex items-center px-4 -mb-1 border-b-2 dark:border-transparent"
              >Link</a
            >
          </li>
          <li class="flex">
            <a
              rel="noopener noreferrer"
              href="#"
              class="flex items-center px-4 -mb-1 border-b-2 dark:border-transparent"
              >Link</a
            >
          </li>
        </ul>
        <div class="items-center flex-shrink-0 hidden lg:flex">
          <button class="self-center px-8 py-3 rounded">Sign in</button>
          <button
            class="self-center px-8 py-3 font-semibold rounded dark:bg-violet-400 dark:text-gray-900"
          >
            Sign up
          </button>
        </div>
        <button class="p-4 lg:hidden">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            class="w-6 h-6 dark:text-gray-100"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            ></path>
          </svg>
        </button>

        <label
          for="Toggle1"
          class="inline-flex items-center space-x-4 cursor-pointer dark:text-gray-100"
        >
          <span>Light</span>
          <span class="relative">
            <input
              id="Toggle1"
              type="checkbox"
              class="hidden peer toggle-theme"
            />
            <div
              class="w-10 h-6 rounded-full shadow-inner dark:bg-gray-400 peer-checked:dark:bg-violet-400"
            ></div>
            <div
              class="absolute inset-y-0 left-0 w-4 h-4 m-1 rounded-full shadow peer-checked:right-0 peer-checked:left-auto dark:bg-gray-800"
            ></div>
          </span>
          <span>Dark</span>
        </label>
      </div>
    </header>

    <div
      class="flex flex-col max-w-md p-6 rounded-md sm:p-10 dark:bg-gray-900 dark:text-gray-100 mx-auto"
    >
      <div class="mb-8 text-center">
        <h1 class="my-3 text-4xl font-bold">Sign in</h1>
        <p class="text-sm dark:text-gray-400">Sign in to access your account</p>
      </div>
      <form novalidate="" action="" class="space-y-12">
        <div class="space-y-4">
          <div>
            <label for="email" class="block mb-2 text-sm">Email address</label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="leroy@jenkins.com"
              class="w-full px-3 py-2 border rounded-md dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
            />
          </div>
          <div>
            <div class="flex justify-between mb-2">
              <label for="password" class="text-sm">Password</label>
              <a
                rel="noopener noreferrer"
                href="#"
                class="text-xs hover:underline dark:text-gray-400"
                >Forgot password?</a
              >
            </div>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="*****"
              class="w-full px-3 py-2 border rounded-md dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
            />
          </div>
        </div>
        <div class="space-y-2">
          <div>
            <button
              type="button"
              class="w-full px-8 py-3 font-semibold rounded-md dark:bg-violet-400 dark:text-gray-900"
            >
              Sign in
            </button>
          </div>
          <p class="px-6 text-sm text-center dark:text-gray-400">
            Don't have an account yet?
            <a
              rel="noopener noreferrer"
              href="#"
              class="hover:underline dark:text-violet-400"
              >Sign up</a
            >.
          </p>
        </div>
      </form>
    </div>

    <div class="container p-2 mx-auto sm:p-4 dark:text-gray-100">
      <h2 class="mb-4 text-2xl font-semibold leadi">Contacts</h2>
      <div class="overflow-x-auto">
        <table class="w-full p-6 text-xs text-left whitespace-nowrap">
          <colgroup>
            <col class="w-5" />
            <col />
            <col />
            <col />
            <col />
            <col />
            <col class="w-5" />
          </colgroup>
          <thead>
            <tr class="dark:bg-gray-700">
              <th class="p-3">A-Z</th>
              <th class="p-3">Name</th>
              <th class="p-3">Job title</th>
              <th class="p-3">Phone</th>
              <th class="p-3">Email</th>
              <th class="p-3">Address</th>
              <th class="p-3">
                <span class="sr-only">Edit</span>
              </th>
            </tr>
          </thead>
          <tbody class="border-b dark:bg-gray-900 dark:border-gray-700">
            <tr>
              <td class="px-3 text-2xl font-medium dark:text-gray-400">A</td>
              <td class="px-3 py-2">
                <p>Dwight Adams</p>
              </td>
              <td class="px-3 py-2">
                <span>UI Designer</span>
                <p class="dark:text-gray-400">Spirit Media</p>
              </td>
              <td class="px-3 py-2">
                <p>555-873-9812</p>
              </td>
              <td class="px-3 py-2">
                <p>dwight@adams.com</p>
              </td>
              <td class="px-3 py-2">
                <p>71 Cherry Court, SO</p>
                <p class="dark:text-gray-400">United Kingdom</p>
              </td>
              <td class="px-3 py-2">
                <button
                  type="button"
                  title="Open details"
                  class="p-1 rounded-full dark:text-gray-600 hover:dark:bg-gray-700 focus:dark:bg-gray-700"
                >
                  <svg viewBox="0 0 24 24" class="w-4 h-4 fill-current">
                    <path
                      d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                    ></path>
                  </svg>
                </button>
              </td>
            </tr>
            <tr>
              <td class="px-3 text-2xl font-medium dark:text-gray-400"></td>
              <td class="px-3 py-2">
                <p>Richie Allen</p>
              </td>
              <td class="px-3 py-2">
                <span>Geothermal Technician</span>
                <p class="dark:text-gray-400">Icecorps</p>
              </td>
              <td class="px-3 py-2">
                <p>555-129-0761</p>
              </td>
              <td class="px-3 py-2">
                <p>richie@allen.com</p>
              </td>
              <td class="px-3 py-2">
                <p>Knesebeckstrasse 32, Obersteinebach</p>
                <p class="dark:text-gray-400">Germany</p>
              </td>
              <td class="px-3 py-2">
                <button
                  type="button"
                  title="Open details"
                  class="p-1 rounded-full dark:text-gray-600 hover:dark:bg-gray-700 focus:dark:bg-gray-700"
                >
                  <svg viewBox="0 0 24 24" class="w-4 h-4 fill-current">
                    <path
                      d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                    ></path>
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
          <tbody class="border-b dark:bg-gray-900 dark:border-gray-700">
            <tr>
              <td class="px-3 text-2xl font-medium dark:text-gray-400">B</td>
              <td class="px-3 py-2">
                <p>Alex Bridges</p>
              </td>
              <td class="px-3 py-2">
                <span>Administrative Services Manager</span>
                <p class="dark:text-gray-400">Smilectronics</p>
              </td>
              <td class="px-3 py-2">
                <p>555-238-9890</p>
              </td>
              <td class="px-3 py-2">
                <p>alex@bridges.com</p>
              </td>
              <td class="px-3 py-2">
                <p>Hooivelden 117, Kortrijk</p>
                <p class="dark:text-gray-400">Belgium</p>
              </td>
              <td class="px-3 py-2">
                <button
                  type="button"
                  title="Open details"
                  class="p-1 rounded-full dark:text-gray-600 hover:dark:bg-gray-700 focus:dark:bg-gray-700"
                >
                  <svg viewBox="0 0 24 24" class="w-4 h-4 fill-current">
                    <path
                      d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                    ></path>
                  </svg>
                </button>
              </td>
            </tr>
            <tr>
              <td class="px-3 text-2xl font-medium dark:text-gray-400"></td>
              <td class="px-3 py-2">
                <p>Lynette Brown</p>
              </td>
              <td class="px-3 py-2">
                <span>Camera Operator</span>
                <p class="dark:text-gray-400">Surge Enterprises</p>
              </td>
              <td class="px-3 py-2">
                <p>555-521-5712</p>
              </td>
              <td class="px-3 py-2">
                <p>lynette@brown.com</p>
              </td>
              <td class="px-3 py-2">
                <p>22 rue de la Boétie, Poitiers</p>
                <p class="dark:text-gray-400">France</p>
              </td>
              <td class="px-3 py-2">
                <button
                  type="button"
                  title="Open details"
                  class="p-1 rounded-full dark:text-gray-600 hover:dark:bg-gray-700 focus:dark:bg-gray-700"
                >
                  <svg viewBox="0 0 24 24" class="w-4 h-4 fill-current">
                    <path
                      d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                    ></path>
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
          <tbody class="border-b dark:bg-gray-900 dark:border-gray-700">
            <tr>
              <td class="px-3 text-2xl font-medium dark:text-gray-400">C</td>
              <td class="px-3 py-2">
                <p>Mariah Claxton</p>
              </td>
              <td class="px-3 py-2">
                <span>Nuclear Technician</span>
                <p class="dark:text-gray-400">White Wolf Brews</p>
              </td>
              <td class="px-3 py-2">
                <p>555-654-9810</p>
              </td>
              <td class="px-3 py-2">
                <p>mariah@claxton.com</p>
              </td>
              <td class="px-3 py-2">
                <p>R Oliveirinhas 71, Maia</p>
                <p class="dark:text-gray-400">Portugal</p>
              </td>
              <td class="px-3 py-2">
                <button
                  type="button"
                  title="Open details"
                  class="p-1 rounded-full dark:text-gray-600 hover:dark:bg-gray-700 focus:dark:bg-gray-700"
                >
                  <svg viewBox="0 0 24 24" class="w-4 h-4 fill-current">
                    <path
                      d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                    ></path>
                  </svg>
                </button>
              </td>
            </tr>
            <tr>
              <td class="px-3 text-2xl font-medium dark:text-gray-400"></td>
              <td class="px-3 py-2">
                <p>Hermila Craig</p>
              </td>
              <td class="px-3 py-2">
                <span>Production Engineer</span>
                <p class="dark:text-gray-400">Cavernetworks Co.</p>
              </td>
              <td class="px-3 py-2">
                <p>555-091-8401</p>
              </td>
              <td class="px-3 py-2">
                <p>hermila@craig.com</p>
              </td>
              <td class="px-3 py-2">
                <p>Rua da Rapina 89, Espeja</p>
                <p class="dark:text-gray-400">Spain</p>
              </td>
              <td class="px-3 py-2">
                <button
                  type="button"
                  title="Open details"
                  class="p-1 rounded-full dark:text-gray-600 hover:dark:bg-gray-700 focus:dark:bg-gray-700"
                >
                  <svg viewBox="0 0 24 24" class="w-4 h-4 fill-current">
                    <path
                      d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
                    ></path>
                  </svg>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <footer class="dark:bg-gray-800 dark:text-gray-50">
      <div
        class="container flex flex-col p-4 mx-auto md:p-8 lg:flex-row dark:divide-gray-400"
      >
        <ul
          class="self-center py-6 space-y-4 text-center sm:flex sm:space-y-0 sm:justify-around sm:space-x-4 lg:flex-1 lg:justify-start"
        >
          <li>Shop</li>
          <li>About</li>
          <li>Blog</li>
          <li>Pricing</li>
          <li>Contact</li>
        </ul>
        <div class="flex flex-col justify-center pt-6 lg:pt-0">
          <div class="flex justify-center space-x-4">
            <a
              rel="noopener noreferrer"
              href="#"
              title="Instagram"
              class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 32 32"
                fill="currentColor"
                class="w-4 h-4"
              >
                <path
                  d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z"
                ></path>
              </svg>
            </a>
            <a
              rel="noopener noreferrer"
              href="#"
              title="Pinterest"
              class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 32 32"
                class="w-4 h-4"
              >
                <path
                  d="M16.021 0c-8.828 0-15.984 7.156-15.984 15.984 0 6.771 4.214 12.552 10.161 14.88-0.141-1.266-0.266-3.203 0.052-4.583 0.292-1.25 1.875-7.943 1.875-7.943s-0.479-0.964-0.479-2.375c0-2.219 1.292-3.88 2.891-3.88 1.365 0 2.026 1.021 2.026 2.25 0 1.37-0.87 3.422-1.323 5.323-0.38 1.589 0.797 2.885 2.365 2.885 2.839 0 5.026-2.995 5.026-7.318 0-3.813-2.75-6.49-6.677-6.49-4.547 0-7.214 3.417-7.214 6.932 0 1.375 0.526 2.854 1.188 3.651 0.13 0.161 0.146 0.302 0.109 0.464-0.12 0.5-0.391 1.599-0.443 1.818-0.073 0.297-0.229 0.359-0.536 0.219-1.99-0.922-3.245-3.839-3.245-6.193 0-5.036 3.667-9.672 10.563-9.672 5.542 0 9.854 3.958 9.854 9.229 0 5.516-3.474 9.953-8.307 9.953-1.62 0-3.141-0.839-3.677-1.839l-1 3.797c-0.359 1.391-1.339 3.135-2 4.193 1.5 0.458 3.078 0.714 4.734 0.714 8.813 0 15.979-7.151 15.979-15.984 0-8.828-7.167-15.979-15.979-15.979z"
                ></path>
              </svg>
            </a>
            <a
              rel="noopener noreferrer"
              href="#"
              title="Twitter"
              class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 32 32"
                class="w-4 h-4"
              >
                <path
                  d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"
                ></path>
              </svg>
            </a>
            <a
              rel="noopener noreferrer"
              href="#"
              title="Facebook"
              class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 32 32"
                class="w-4 h-4"
              >
                <path
                  d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z"
                ></path>
              </svg>
            </a>
            <a
              rel="noopener noreferrer"
              href="#"
              title="Gmail"
              class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 dark:bg-violet-400 dark:text-gray-900"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 32 32"
                class="w-4 h-4"
              >
                <path
                  d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </footer>

    <script>
      const htmlEl = document.querySelector("html");
      const toggleEl = document.querySelector(".toggle-theme");

      toggleEl.addEventListener("click", () => {
        if (htmlEl.classList.contains("dark")) {
          htmlEl.classList.remove("dark");
          return;
        }

        htmlEl.classList.add("dark");
      });
    </script>
  </body>
</html>
